<template>
  <div class="main themeBGC flex justify-between items-center">
    <div class="flex items-center">
      <div v-if="backTitle" @click="router.back()">
        <svg
          class="mr-2"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
          width="12px"
          height="18px"
        >
          <g transform="matrix(1 0 0 1 -380 -84 )">
            <path
              d="M 11.155510243984086 15.578648939290296  L 3.493261455525726 8.868902140971727  L 11.161543510746826 2.16443445107047  C 11.728670586427825 1.6681982598494685  11.728670586427825 0.8657737804281709  11.161543510746826 0.3748166976243965  C 10.594416435065439 -0.12141949359660487  9.677359887155554 -0.11614038517937786  9.110232811474166 0.3748166976243965  L 0.42232867337952484 7.971453710040109  C -0.12669860201403285 8.451852576009387  -0.13876513553912317 9.222602404927152  0.3800958060417088 9.718838596148217  L 9.104199544711816 17.36826669273637  C 9.38776308255212 17.616384788346913  9.761825621831479 17.737804281943518  10.129854894348098 17.737804281943518  C 10.497884166864715 17.737804281943518  10.871946706143685 17.616384788346913  11.155510243984086 17.36826669273637  C 11.722637319665473 16.87203050151537  11.722637319665473 16.06960602209405  11.155510243984086 15.578648939290296  Z "
              fill-rule="nonzero"
              fill="#006ab2"
              stroke="none"
              transform="matrix(1 0 0 1 380 84 )"
            />
          </g>
        </svg>
      </div>
      <div v-if="backTitle" class="back clickTC largeTS flex items-center" @click="bgckFn">
        <!-- <left-outlined class="back-icon" /> -->

        {{ backTitle }}
        <div class="separate largeTitleTS">/</div>
      </div>
      <div v-if="titles" class="back clickTC largeTS flex items-center">
        <svg
          class="mr-2"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
          width="12px"
          height="18px"
        >
          <g transform="matrix(1 0 0 1 -380 -84 )">
            <path
              d="M 11.155510243984086 15.578648939290296  L 3.493261455525726 8.868902140971727  L 11.161543510746826 2.16443445107047  C 11.728670586427825 1.6681982598494685  11.728670586427825 0.8657737804281709  11.161543510746826 0.3748166976243965  C 10.594416435065439 -0.12141949359660487  9.677359887155554 -0.11614038517937786  9.110232811474166 0.3748166976243965  L 0.42232867337952484 7.971453710040109  C -0.12669860201403285 8.451852576009387  -0.13876513553912317 9.222602404927152  0.3800958060417088 9.718838596148217  L 9.104199544711816 17.36826669273637  C 9.38776308255212 17.616384788346913  9.761825621831479 17.737804281943518  10.129854894348098 17.737804281943518  C 10.497884166864715 17.737804281943518  10.871946706143685 17.616384788346913  11.155510243984086 17.36826669273637  C 11.722637319665473 16.87203050151537  11.722637319665473 16.06960602209405  11.155510243984086 15.578648939290296  Z "
              fill-rule="nonzero"
              fill="#006ab2"
              stroke="none"
              transform="matrix(1 0 0 1 380 84 )"
            />
          </g>
        </svg>
        <div v-for="(e, i) in titleLists" :key="i" class="flex items-center" @click="e.bgckFn">
          {{ e.title }}
          <div class="separate largeTitleTS">/</div>
        </div>
      </div>
      <div class="title focusTC mediumTitleTS">{{ title }}</div>
    </div>
    <div>
      <slot name="right" />
    </div>
  </div>
</template>

<script lang="ts">
import { onBeforeMount, onMounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'

/**
 * title：主标题
 * backTitle：返回标题
 * bgckFn：返回处理函数
 * titles：是否开启多个标题
 * titleLists：[
 *  {
 *    title:返回标题,
 *    bgckFn：返回处理函数
 *  }
 * ]:多个标题数据
 * */
export default {
  name: 'PageTitle',
  components: {},
  props: {
    title: String, // 标题
    backTitle: String, // 返回标题
    bgckFn: Function, // 返回的点击函数
    titles: Boolean, // 是否多个标题
    titleLists: Array // 多个标题数据
  },
  setup() {
    const router = useRouter()
    const data = reactive({
      // title: '账套分析'
    })
    onBeforeMount(() => {})
    onMounted(() => {})
    const refData = toRefs(data)
    return {
      ...refData,
      router
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  height: 50px;
  background: #eadcb9;
  padding-left: 40px;
  padding-right: 40px;
  .back {
    font-size: 16px;
    line-height: 60px;
    color: #006ab2;
    vertical-align: middle;
    cursor: pointer;
    .back-icon {
      font-size: 20px;
      padding-right: 7px;
    }
  }
  .separate {
    padding-right: 15px;
    padding-left: 15px;
    font-size: 24px;
    font-weight: 100;
    line-height: 60px;
  }
  .title {
    font-size: 20px;
    line-height: 60px;
    color: #bd9e55;
    vertical-align: middle;
  }
}
</style>
